﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=8; IE=9" />
    <!-- title -->
    <title>KillDaBugs | Log in</title>
    <!-- main stylesheets -->
    <link href="/css/screen.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="/css/web_site_copy_screen.css" media="screen" rel="stylesheet" type="text/css" />
    <!-- favicon -->
    <link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico" />
    <link rel="icon" type="image/png" href="/favicon.png" />
    <!-- jquery -->
    <script type="text/javascript" src="/js/jquery-1.6.2.min.js"></script>
    <!-- validity plugin for jquery, used for client side's form validation -->
    <script type="text/javascript" src="/js/jquery.validity.js"></script>
    <link href="/css/jquery.validity.css" media="screen" rel="stylesheet" type="text/css" />
    <!-- jquery calls -->
    <script type="text/javascript">
        // after document loads successfully
        $(document).ready(function () {
            // show server error message if available
            if ($("#server_error_message").length)
                $("#flash").show(400).delay(3000).fadeOut(1000);

            /* form validation */
            // use summary mode instead of label mode
            $.validity.setup({ outputMode: "summary" });
            // what to validate in form
            $("form#new_user_session").validity(function () {
                $("#txtUsername")   // Username field:
                .require()          // Required
                .match(/^([a-zA-Z])[a-zA-Z_-]*[\w_-]*[\S]$|^([a-zA-Z])[0-9_-]*[\S]$|^[a-zA-Z]*[\S]$/,
                       "Username must be alphanumeric and starts with a letter"); // must be alphanumeric
                $("#txtPassword")   // Password field:
                .require();         // Required
            });
            // show form validation error messages when clicking on Login button
            $("#btnLogin").click(function () {
                $("#flash_validity").show(300).delay(1500).fadeOut(300);
            });
        });
    </script>
</head>
<body class="small">
    <!-- error message from server, use jquery to display -->
    <div id="flash" class="flash_html flash_ajax">
        <asp:Literal ID="ltrErrorMessage" runat="server"></asp:Literal>
    </div>
    <div id="flash_validity" class="flash_html flash_ajax">
        <div class="validity-summary-container">
            <ul></ul>
        </div>
    </div>
    <!-- header -->
    <div id="company-header">
        <div class="wrapper clearfix">
            <h1><a href="/" title="KillDaBugs Home">KillDaBugs Homepage</a> </h1>
            <ul class="main-navigation">
                <li><a href="/LoginOptions.aspx">Login Options</a></li>
            </ul>
        </div>
    </div>
    <!-- pixel perfect slider -->
    <div id="company-section">
    </div>
    <!-- body content -->
    <div id="company-content">
        <div class="wrapper clearfix">
            <div id="section-header" class="centered clearfix">
                <h1 class="header-pricing">Welcome to KillDaBugs! </h1>
                <h2 class="subheading">Login to your account below</h2>
            </div>
            <div class="layout-single form clearfix">
                <div class="main clearfix">
                    <div class="pad google regular">
                        <div id="assistly_login_panel">
                            <!-- main form -->
                            <form class="clearfix" id="new_user_session" runat="server">
                            <div class="text clearfix">
                                <label for="txtUsername">Username:</label>
                                <asp:TextBox ID="txtUsername" runat="server" title="Username"></asp:TextBox>
                            </div>
                            <div class="text clearfix">
                                <label for="txtPassword">Password:</label>
                                <asp:TextBox ID="txtPassword" runat="server" TextMode="Password" title="Password"></asp:TextBox>
                            </div>
                            <div class="checkbox clearfix">
                                <a href="/PasswordRecovery.aspx" class="link">Forgot your password?</a>
                                <label>
                                    <asp:CheckBox ID="chbRememberMe" runat="server" />Remember Me</label>
                            </div>
                            <div class="submit clearfix">
                                <asp:Button ID="btnLogin" runat="server" Text="Login" CssClass="button-primary button-small" OnClick="btnLogin_Click" />
                            </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!-- footer -->
            <div id="footer-small">
                ©2011 <a href="/About.aspx">KillDaBugs Team</a>. All Rights Reserved.
            </div>
        </div>
    </div>
</body>
</html>